<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" th:href="@{/css/BLogin.css}" />
	</head>
	<body style="background-color: #02262d;">
<!--	注册密码-->
<!--		<span th:text="${pass}" id="zcmm"/>-->
		<div class="bloginDiv">
			<div class="ProFontLogo">BhSyVideo</div>
			<form action="/bhsy/Bmain" method="post" onsubmit="return loginClick()">
				<div class="ProAccountDiv">
					<p>账号:</p>
					<input name="name" class="inpAccount" type="text" id="zh"/>
				</div>
				<div class="ProPwdDiv">
					<p>密码:</p>
					<input name="pass" class="inpPwd" type="password" id="mm"/>
				</div>
				<!-- 登录 -->
				<button class="logoinBtn" id="logoinBtn">登录</button>
			</form>
			<!-- 注册 当点击注册时
			 className (ProAccountDiv,ProPwdDiv,logoinBtn，ZcBtn)--隐藏
			 className (ProUNameDiv,ProUAccountDiv) ID (CreateBtn)--显示
			 -->
			<button class="ZcBtn" >注册</button>

			<!--	下面这些是打开登录页面需要默认隐藏 为了登录注册功能方便写我就不写默认了  js功能的记得添加上去 		-->
			<!-- 用户昵称 不可以有特殊字符 长度不能超过10 -->
			<div class="ProUNameDiv" style="display: none;">
				<p>昵&nbsp;&nbsp;称:</p>
				<input class="inpUName" type="text"  maxlength='10'  id="nc"/>
			</div>
			<!-- 只能是数字 长度不能超过12 -->
			<div class="ProUAccountDiv" style="display: none;">
				<p>用户名:</p>
				<input class="inpUAccount" type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength='12' id="yhm"/>
			</div>
			<!--
				点击ID为 CreateBtn 的注册按钮
				用ajax进行注册,密码自己在后台用雪花算法生成
				注册成功后在前端 alert() 刚刚生成的密码告诉用户
			-->
			<button id="CreateBtn" class="ZcBtn" style="display: none;">注册</button>
			<button id="DlBtn" class="logoinBtn" style="display: none;">登录</button>


		</div>
	</body>
		<script th:src="@{/js/jquery-360.min.js}"></script>
	<script>
		function loginClick(){
			var inpAccount=$(".inpAccount").val();//账号
			var inpPwd=$(".inpPwd").val();//密码
			if (inpAccount=="" || inpPwd==""){
				alert("账号或密码未输入");
				return false;
			}else {
				return true;
			}
		}
		$(function () {
			//切换注册功能
			$(".ZcBtn").click(function () {
				$(".ProAccountDiv").hide();
				$(".ProPwdDiv").hide();
				$("#logoinBtn").hide();
				$(".ZcBtn").hide();
				$(".ProUNameDiv").show();
				$(".ProUAccountDiv").show();
				$("#CreateBtn").show();
				$("#DlBtn").show();

			})
			//切换登入功能
			$("#DlBtn").click(function () {
				$(".ProAccountDiv").show();
				$(".ProPwdDiv").show();
				$("#logoinBtn").show();
				$(".ZcBtn").show();
				$(".ProUNameDiv").hide();
				$(".ProUAccountDiv").hide();
				$("#CreateBtn").hide();
				$("#DlBtn").hide();

			})
			//判断注册功能
			$("#CreateBtn").click(function () {
				var inpUName=$(".inpUName").val();//昵称
				var inpUAccount=$(".inpUAccount").val();//用户名
				var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]");
				var result=inpUName.match(pattern);

				if (result){
					alert("昵称不可含有特殊字符串")
					$(".inpUName").val("");
				}else if (inpUName=="" || inpUAccount==""){
					alert("昵称和用户名不可为空")
				}else {
					$.ajax({
						url:"/zc",
						type:"post",
						data:{
							"yhm":inpUAccount,
							"nc":inpUName
						},
						success:function (data){
							console.log(data)
							if (data.code=="500"){
								alert("改昵称已被注册");
								$("#nc").text("");
							}else {
								var uMesg = data.map;
								location.reload();
								alert("注册成功--请记住你的密码:"+uMesg.pass)
							}
						}
					})
				}
			})
		})
	</script>
</html>
